<template>
	<jf-navigation background="#ffffff">
		<view>{{$t('index.fans.navigation')}}</view>
	</jf-navigation>
	
	<jf-falls :list="data.list" :loading="data.loading" :loadEnd="data.loadEnd" :loadError="data.loadError" :total="data.total" :loadNoneText="$t('common.load.none')" :loadEndText="$t('common.load.notMore')" :loadErrorText="$t('common.load.error')" @load="getList()" :column="1">
		<template #scope="{item}">
			<view class="fans_item" @click="navGo('/pages/index/user/user?id=' + item.uid)">
				<image :src="item.user_info.avatar || headerIcon" mode="aspectFill" class="fans_header"></image>
				<view class="fans_content">
					<view class="fans_content_top">
						<view class="fans_name">{{item.user_info.nickname}}</view>
						<view class="fans_level">LV{{item.user_info.level}}</view>
					</view> 
					<view class="fans_remark">{{item.user_info.mark}}</view> 
				</view>
				<view class="fans_btn" :class="{'active': store.getFans(item.uid) === 0}" @click.stop="attentionUser(item)" v-if="item.uid !== data.userId">{{store.getFans(item.uid) === 1?'':'+'}}{{$t(store.getFans(item.uid) === 1 ? 'common.fans.mutualAttention' : 'common.fans.recurrenceAttention')}}</view>
			</view>
		</template>
	</jf-falls>
</template>

<script lang="ts" setup>
	import headerIcon from "@/static/images/common/header_icon.png"
	import { reactive, getCurrentInstance } from 'vue';
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import { listFans, attention } from "@/api/user"
	import { useStore } from "@/store/main"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const data = reactive({
		list: [],
		total: 0,
		loadEnd: false,
		loading: false,
		loadError: false,
		userId: store.getUserinfo.uid
	})
	const queryParams = reactive({
		user_id: null,
		page: 1,
		limit: 10
	})
	
	const navGo = ( url: string ):void => {
		uni.navigateTo({url})
	}
	const attentionUser = (item:any):void => {
		if(item.uploading)return
		item.uploading = true
		attention({
			user_id: item.uid,
			type: item.is_sub === 1 ? 0 : 1
		}).then(():void => {
			uni.showToast({
				title: proxy.$t(item.is_sub === 1 ? 'index.info.unAttentionSuccess' : 'index.info.attentionSuccess'),
				icon: "none"
			})
			item.is_sub = item.is_sub === 1 ? 0 : 1
			store.setFans(item.uid, item.is_sub)
		}).catch(() => {
			uni.showToast({
				title: proxy.$t(item.is_sub === 1 ? 'index.info.unAttentionFail' : 'index.info.attentionFail'),
				icon: "none"
			})
		}).finally(() => {
			item.uploading = false
		})
	}
	const getList = (init?:boolean):void => {
		if(init){
			data.list = []
			data.total = 0
			data.loading = false
		}
		if(data.loading || data.loadEnd) return
		data.loading = true
		data.loadEnd = false
		data.loadError = false
		listFans(queryParams).then( (res:any) =>{
			res.data.list.map((item: any)=>{
				store.setFans(item.uid, item.is_sub)
			})
			data.total = res.data.count
			data.list = data.list.concat(res.data.list)
			console.log(data.list)
			queryParams.page += 1
			if((queryParams.page - 1) * queryParams.limit > data.total){
				data.loadEnd = true
			}
		}).catch(() => {
			data.loadError = true
		}).finally(() => {
			data.loading = false
		})
	}
	
	onLoad((options:any):void => {
		if(options.id)queryParams.user_id = Number(options.id)
		getList()
	})
	onReachBottom(() => {
		getList()
	})
</script>